<template>
  <div :class="$style.returnVisit">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
          <el-form-item prop="groupId" label="业务组">
            <SearchSelectPicker
              url="/call-center/api/v1/businessGroup/page"
              placeholder="请选择业务组"
              lable-name="groupName"
              :value.sync="formData.groupIds"
              :cur-options.sync="groupOption"
              multiple
              collapse-tags
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="customerService" label="坐席">
            <SearchSelectPicker
              url="/call-center/api/v1/staffInfo/page"
              :other-raw="{groupNos:groupOption.map(e=>e.groupNo)}"
              placeholder="请选择坐席"
              value-name="accountNo"
              lable-name="staffName"
              :value.sync="formData.customerService"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="date" label="任务执行周期">
            <el-date-picker
              v-model="formData.date"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              opt
              clearable
            />
          </el-form-item>
          <el-form-item>
            <Button @click="resetHandle">重置</Button>
            <ExportPane :table-config="tableConfig" :data-source="selectionList" :other-raw="otherRaw" :query-data-fun="queryHandle" filename="一线通回访报表" extension="xls">导出</ExportPane>
            <Button type="primary" @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box ref="table" no-request :other-filters="otherFilters" :table-config="tableConfig" :other-raw="otherRaw" @selection-change="selectionChange">
        <el-table-column slot="before" type="selection" width="50" align="center" />
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import ExportPane from '@/components/ExportPane'
import { filtersRaw, addOneDay } from '@/utils'
export default {
  name: 'ReportFormReturnVisit',
  components: {
    ContentWrap,
    FormContainer,
    SearchSelectPicker,
    ExportPane
  },
  data() {
    const validatorDate = (r, v, c) => {
      if (!(v instanceof Array) || v.length !== 2) {
        c(new Error('任务执行周期'))
      } else {
        c()
      }
    }
    return {
      formData: {
        groupIds: [],
        customerService: '',
        date: []
      },
      formRules: {
        date: [{ required: true, validator: validatorDate, trigger: 'change' }]
      },
      groupOption: [],
      otherFilters: [],
      otherRaw: {},
      selectionList: [],
      tableConfig: {
        interfacePath: '/call-center/api/v1/callBackTask/offlineReport/page',
        pageFlag: true,
        hideFuncBar: true,
        setting: [
          {
            prop: 'index',
            label: '序号',
            width: 80,
            align: 'center',
            formatData: (val) => {
              return val.keyIndex + 1
            }
          },
          {
            label: '坐席',
            prop: 'customerServiceName',
            formatData: v => {
              const str = `${v.customerServiceName}(${v.customerService})`
              if (v.platformNo) {
                return `${str} - ${v.platformNo}`
              }
              return str
            }
          },
          {
            label: '分配量',
            prop: 'distribute'
          },
          {
            label: '完成量',
            prop: 'finish'
          },
          {
            label: '未完成量',
            prop: 'unfinish'
          },
          {
            label: '回访成功量',
            prop: 'success'
          },
          {
            label: '回访成功率',
            prop: 'successRate',
            formatData: v => {
              const { successRate } = v
              return successRate === undefined ? 0 : `${(successRate * 100).toFixed(2)}%`
            }
          }
        ]
      }
    }
  },
  methods: {
    resetHandle() {
      this.$refs.form.resetFields()
    },
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const otherFilters = []
        const otherRaw = {}
        if (this.formData.date && this.formData.date.length === 2) {
          otherRaw.startDate = this.formData.date[0]
          otherRaw.endDate = addOneDay(this.formData.date[1])
        }
        this.otherRaw = otherRaw
        const { groupIds, customerService } = this.formData
        if (groupIds instanceof Array && groupIds.length > 0) {
          otherFilters.push(filtersRaw('groupId', groupIds.join(','), 'in'))
        }
        if (customerService) {
          otherFilters.push(filtersRaw('customerService', customerService, '='))
        }
        this.otherFilters = otherFilters
        if (type !== 'export') {
          this.refreshTable()
        } else {
          return otherFilters
        }
      })
    },
    selectionChange(v) {
      this.selectionList = v
    },
    refreshTable(type) {
      this.$nextTick(() => {
        this.$refs.table.initTableData()
      })
    }
  }
}
</script>
<style lang="scss" module>
.returnVisit{
  & tr{
    background-color: white !important;
  }
}
</style>
